<template>
<div>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <!-- 搜索 -->
    <el-form-item label="用户呢称">
      <el-input v-model="searchs" style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
    </el-form-item>
    <el-form-item style="position: absolute; right: 100px;">
      <el-button type="primary" style="pa" @click="adduser">新增用户</el-button>
    </el-form-item>
  </el-form>

  <!-- 用户信息列表 -->
  <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;" @cell-click="celltable">
    <el-table-column  label="昵称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
     <!--  <template>
        <span style="margin-left: 10px"></span>
      </template> -->
    </el-table-column>
    <el-table-column label="入学">
        <template slot-scope="scope">{{ scope.row.school }}</template>
      <!-- <template>
        <i :class="form.school"></i>
      </template> -->
    </el-table-column>
    <el-table-column label="操作" width="180">
      <template>
        <el-button size="mini" @click="edituser">编辑</el-button>
        <el-button size="mini" type="danger" @click="deleteuser">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 页码 -->
  <div class="block" style="padding-top: 10px;">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]" layout="total,prev, pager, next, jumper" :total="tableData.length">
      >
    </el-pagination>
  </div>
    <!-- {{this.$store.state}} -->
  <!-- 功能组件 -->
  <Adduser @func = 'fn'  :type="buttontype.adduser" :fun="showbtn" tname="adduser" :tablerow="tablerow"></Adduser>
  <Edituser :type="buttontype.edituser" :fun="showbtn" tname="edituser" :tablerow="tablerow"></Edituser>
  <Deleteuser :type="buttontype.deleteuser" :fun="showbtn" tname="deleteuser" :tablerow="tablerow"></Deleteuser>

</div>
</template>

<script>
import Adduser from './Adduser.vue'
import Edituser from './Edituser.vue'
import Deleteuser from './Deleteuser.vue'
import {
  getlist
} from '@/api/function.js'
export default {
  data () {
    return {
      userId: '', // 用户id
      searchs: '', // 搜索内容
      currentPage: 1, // 初始页
      pagesize: 10, //    每页的数据
      tablerow: '', // 当前选中的用户
      buttontype: {
        // 功能模态框
        adduser: false,
        edituser: false,
        deleteuser: false
      },
      form: {
        name: '', // 昵称
        school: '' // 入学状态；入学：el-icon-check  未入学：el-icon-close
      },
      tableData: [
        {
          name: '韩梅梅',
          school: '入学'
        },
        {
          name: '小明',
          school: '未入学'
        },
        {
          name: '李磊',
          school: '入学'
        },
        {
          name: '韩梅梅',
          school: '入学'
        },
        {
          name: '小明',
          school: '未入学'
        },
        {
          name: '王梅',
          school: '入学'
        },
        {
          name: '李莉',
          school: '未入学'
        }
      ]
    }
  },
  mounted () {
    this.getallinfo()
  },
  components: {
    Adduser,
    Edituser,
    Deleteuser
  },
  methods: {
    // 获取用户信息
    getallinfo () {
      getlist({
        userId: this.userId
      }).then(res => {
        console.log(res)
      })
    },
    // 接收增加子组件 传递过来的值
    fn (val) {
      console.log('父组件' + val)
      this.tableData.unshift(val)
      console.log(this.tableData.length)
    },
    // 当前选中的用户
    celltable (row) {
      this.tablerow = row
    },
    // 搜索功能
    search () {
      console.log(this.searchs)
      this.form.search = ''
    },
    // 关闭模态框的状态
    showbtn (type) {
      this.buttontype[type] = false
    //   this.tablerow = ''
    },
    // 开启新增用户模态框的状态
    adduser () {
      this.buttontype.adduser = true
    //   this.form = ''
    },
    // 开启修改用户信息模态框的状态
    edituser () {
      this.buttontype.edituser = true
    },
    // 开启删除用户信息模态框的状态
    deleteuser () {
      this.buttontype.deleteuser = true
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size
      console.log(this.pagesize) // 每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    }

  }
}
</script>

<style scoped="scoped">
</style>
